<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">报警信息</block>
			<block slot="right">
				<view @tap="showModa2" data-target="DialogModal2">排序</view>
			</block>
		</cu-custom>
		<view class="solid-bottom">

			<view class="cu-bar bg-white search " style="height: 1rem;">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" v-model="deviceId" placeholder="输入设备编号" confirm-type="search"
						@input="goStatistics()"></input>
				</view>
			</view>

			<view class="cu-bar search" style="height: 1rem; ">
				<view class="search-form ">
					<select-lay style="" class="seclectpaytype" :value="louceng" slabel="type" svalue="typeid"
						placeholder="报警类型" :zindex="1208" :options="louceng_data"
						@selectitem="selectitem4"></select-lay>

					<button class="cu-btn" style="width:1rem; background-color: #F5F5F5;color: #BBBBBB;"
						@tap="reset4()"><text class="cuIcon-roundclose"></text></button>

					<button class="cu-btn shadow-blur round"
						style="width: 4rem; background-color: #f0b863;color: #ffffff;margin-right: 0.3rem;"
						@tap="goStatistics()">查询</button>
					<button class="cu-btn shadow-blur round"
						style="width: 4rem; background-color: #f27050;color: #ffffff;margin-right: 0.3rem;"
						@tap="reset()">重置</button>

				</view>
			</view>
		</view>


		<view class="solid-bottom">
			<scroll-view scroll-x class="bg-white nav text-center ">
				<view class="flex text-center justify-around">
					<view class="cu-item" :class="item.value==TabCur?'text-blue cur':''" v-for="(item,index) in tabs"
						:key="index" @tap="tabSelect" :data-id="item.value">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="container">

			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downOption" @up="upCallback">
				<!-- 数据列表-->
				<view class="al-list cu-list">
					<checkbox-group class="block" @change="CheckboxChange">
						<view
							class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm margin-top-sm"
							style="width: 100vw;height: ;" v-for="(item,index) in msgList" :key="index"
							:class="modalName=='move-box-'+ index?'move-cur':''" @touchstart="ListTouchStart"
							@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">

							<view class="titlePad content" :style="{height:domHeight}">

								<view class="flex justify-start text-cut text-lg"
									style="width:26em;color: #333;font-family: '黑体';">

								</view>

								<view class="flex justify-start text-cut text-lg"
									style="font-family: '黑体';color: #333;margin-top: 0.5rem; ">
									<text style="margin-left: 0.8rem;">{{item.userName}}</text>
									<text style="margin-left: 0.8rem;">{{item.dpname}}</text>
									<text style="margin-left: 0.8rem;">{{item.dpid}}</text>
								</view>

								<view class="flex justify-between margin-top-xs"
									style="font-family: '黑体';color: #333;margin-top: 0.5rem;">
									<view style="padding-left: .8rem;">
										<text>设备编号:&nbsp;{{item.dtuID}}</text>
									</view>
								</view>

								<view class="flex justify-between margin-top-xs"
									style="font-family: '黑体'; width: 100%; color: #333;margin-top: 0.5rem;">

									<view style="padding-left: .8rem;width: 40%;">
										<text v-if="item.warnType=='001'">报警类型:&nbsp;压力超限</text>
										<text v-if="item.warnType=='002'">报警类型:&nbsp;压力过小</text>
										<text v-if="item.warnType=='003'">报警类型:&nbsp;压力变化超限</text>
										<text v-if="item.warnType=='004'">报警类型:&nbsp;温度超限</text>
										<text v-if="item.warnType=='005'">报警类型:&nbsp;温度过低</text>
										<text v-if="item.warnType=='006'">报警类型:&nbsp;温度变化超限</text>
										<text v-if="item.warnType=='007'">报警类型:&nbsp;温度过大</text>
										<text v-if="item.warnType=='008'">报警类型:&nbsp;流量过小</text>
										<text v-if="item.warnType=='009'">报警类型:&nbsp;流量变化超限</text>
										<text v-if="item.warnType=='010'">报警类型:&nbsp;数据异常</text>
										<text v-if="item.warnType=='110'">报警类型:&nbsp;燃气泄露报警</text>
										<text v-if="item.warnType=='101'">报警类型:&nbsp;设备交流电掉电</text>
										<text v-if="item.warnType=='102'">报警类型:&nbsp;设备门被打开</text>
										<text v-if="item.warnType=='103'">报警类型:&nbsp;设备电池电压过低</text>
										<text v-if="item.warnType=='104'">报警类型:&nbsp;强磁干扰</text>
										<text v-if="item.warnType=='114'">报警类型:&nbsp;磁干扰检测断线</text>
										<text v-if="item.warnType=='105'">报警类型:&nbsp;采集器压力超限</text>
										<text v-if="item.warnType=='106'">报警类型:&nbsp;采集器压力过小</text>
										<text v-if="item.warnType=='107'">报警类型:&nbsp;采集器温度超限</text>
										<text v-if="item.warnType=='108'">报警类型:&nbsp;采集器温度过低</text>
										<text v-if="item.warnType=='201'">报警类型:&nbsp;通信失败</text>
									</view>

									<view style="padding-left: .8rem;width: 60%;">
										<text v-if="item.warnLeavel==1" style="color: orange;">一级报警</text>
										<text v-if="item.warnLeavel==2" style="color: red;">二级报警</text>
									</view>
								</view>

								<view class="flex justify-between margin-top-xs"
									style="font-family: '黑体';color: #333;margin-top: 0.5rem;">
									<view style="padding-left: .8rem;">
										<text>报警时间:&nbsp;{{item.revDate}}</text>
									</view>
								</view>

								<view class="flex justify-between margin-top-xs"
									style="font-family: '黑体';color: #333;margin-top: 0.5rem;">
									<view style="padding-left: .8rem;">
										<text v-if="item.dealStatus==0" style="color: red;">未处理</text>
										<text v-if="item.dealStatus==1" style="color: green;">已处理</text>
										<text style="margin-left: 1rem;color: green;"
											v-if="item.dealStatus==1">{{item.dealTime}}</text>
									</view>
								</view>

							</view>

							<view class="action text-sm"
								style="color: #333;margin-top: 1em;margin-left: -13em;width: 10em;">

								<button
									style="background-color: #FC8605;width: 4rem; margin-top: 1em; font-size: 10px;color: #fff;"
									@click="goAnnotationDetail(item)">
									详情</button>

								<button
									style="background-color: #9cc87e;width: 4rem; margin-top: 1rem; font-size: 10px;color: #fff;"
									v-if="item.dealStatus==0" @click="flowmeterWarnDispose(item)">
									处理</button>


								<view v-if="item.dealStatus==0" v-for="(itema, index) in checkbox" :key="index"
									style="margin-top: 2rem;margin-left: 4rem;  ">

									<checkbox :class="itema.checked?'checked':''" :checked="itema.checked?true:false"
										:value="itema.value" v-if="item.id === itema.value"></checkbox>
								</view>

							</view>
						</view>
					</checkbox-group>
				</view>
			</mescroll-uni>
		</view>

		<view class="cu-bar tabbar bg-white shadow foot" style="box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);">
			<view style="display: flex; align-items: center;">

				<checkbox-group style="margin-left: 0.8rem;" class="block" @change="CheckboxChange2" v-if="TabCur===0">
					<checkbox :class="checkeda.checked?'checked':''" :checked="checkeda.checked?true:false"
						:value="checkeda.value"> {{checkeda.value}}</checkbox>
				</checkbox-group>

				<view style="margin-left: 1rem;" v-if="TabCur===0">已选{{selectedList.length}}</view>

				<view style="margin-left: 1rem;">已加载{{msgList.length}}</view>

				<view style="margin-left: 1rem;">总条数{{countData}}</view>
			</view>

			<button class="cu-btn bg-blue shadow" v-if="TabCur===0"
				style=" float: right;margin-right: 0.5rem; font-size: 10px;color: #fff;" @tap="showModal"
				data-target="DialogModal1">批量处理</button>


		</view>

		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">批量处理报警</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group">
						<view class="title">是否处理:</view>
						<view>
							<radio-group name="type" v-model="myFormData.DealStatus" @change="radioChange1">
								<label>
									<radio style="margin-right:0.2rem ; transform:scale(0.7)" value="1" :checked=true />
									<text>已处理</text>
								</label>

								<label>
									<radio style="margin-right:0.2rem ; transform:scale(0.7)" value="0" />
									<text>未处理</text>
								</label>
							</radio-group>
						</view>
					</view>

					<view class="cu-form-group margin-top">
						<textarea maxlength="-1" @input="textareaAInput" style="text-align: left"
							placeholder="请输入处理说明"></textarea>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @click="bulkSubmission">提交</button>

					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName2=='DialogModal2'?'show':''">
			<view class="cu-dialog" style="height: 18rem;">
				<view class="cu-bar bg-white justify-end">
					<view class="content">排序</view>
					<view class="action" @tap="hideModa2">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group" style="width: 100%;height: 100%;">
						<view style="width: 40%; ">
							<view class="title" style="margin-top:0.7rem;">报警时间:</view>
							<view class="title" style="margin-top:0.7rem;">设备编号:</view>
							<view class="title" style="margin-top:0.7rem;">设备名称:</view>
							<view class="title" style="margin-top:0.7rem;" v-if="TabCur===1">处理时间:</view>
							

						</view>
						<view style="width: 50%; ">
							<radio-group name="type" v-model="selectionSort" @change="radioChange2">
								<label>
									<radio style="margin-right:0.2rem ; margin-top:0.7rem;transform:scale(0.7)"
										value="RevDate desc" :checked=true />
									<text>正序</text>
								</label>

								<label>
									<radio style="margin-right:0.2rem ; margin-top:0.7rem; transform:scale(0.7)"
										value="RevDate" />
									<text>倒序</text>
								</label>
								<label>
									<radio style="margin-right:0.2rem ;margin-top:0.7rem;  transform:scale(0.7)"
										value="DtuID desc" />
									<text>正序</text>
								</label>
								<label>
									<radio style="margin-right:0.2rem ; margin-top:0.7rem;transform:scale(0.7)"
										value="DtuID" />
									<text>倒序</text>
								</label>
								<label>
									<radio style="margin-right:0.2rem ;margin-top:0.7rem;transform:scale(0.7)"
										value="UserName desc" />
									<text>正序</text>
								</label>
								<label>
									<radio style="margin-right:0.2rem ; margin-top:0.7rem;transform:scale(0.7)"
										value="UserName" />
									<text>倒序</text>
								</label>
								
								<label v-if="TabCur===1">
									<radio style="margin-right:0.2rem ;margin-top:0.7rem;transform:scale(0.7)"
										value="DealTime desc" />
									<text>正序</text>
								</label>
								<label v-if="TabCur===1">
									<radio style="margin-right:0.2rem ; margin-top:0.7rem;transform:scale(0.7)"
										value="DealTime" />
									<text>倒序</text>
								</label>


							</radio-group>
						</view>

					</view>
				</view>
			</view>

		</view>

	</view>


</template>

<script>
	const tabs = [{
		title: '未处理',
		value: 0
	}, {
		title: '已处理',
		value: 1
	}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				louceng: '',
				louceng_data: [{
						type: '压力超限',
						typeid: '001'
					},
					{
						type: '压力过小',
						typeid: '002'
					},
					{
						type: '压力变化超限',
						typeid: '003'
					},
					{
						type: '温度超限',
						typeid: '004'
					},
					{
						type: '温度过低',
						typeid: '005'
					},
					{
						type: '温度变化超限',
						typeid: '006'
					},
					{
						type: '温度过大',
						typeid: '007'
					},
					{
						type: '流量过小',
						typeid: '008'
					},
					{
						type: '流量变化超限',
						typeid: '009'
					},
					{
						type: '数据异常',
						typeid: '010'
					},
					{
						type: '燃气泄露报警',
						typeid: '110'
					},
					{
						type: '设备交流电掉电',
						typeid: '101'
					},
					{
						type: '设备门被打开',
						typeid: '102'
					},
					{
						type: '设备电池电压过低',
						typeid: '103'
					},
					{
						type: '强磁干扰',
						typeid: '104'
					},
					{
						type: '磁干扰检测断线',
						typeid: '114'
					},
					{
						type: '采集器压力超限',
						typeid: '105'
					},
					{
						type: '采集器压力过小',
						typeid: '106'
					},
					{
						type: '采集器温度超限',
						typeid: '107'
					},
					{
						type: '采集器温度过低',
						typeid: '108'
					},
					{
						type: '通信失败',
						typeid: '201'
					},
				],



				checkeda: {
					value: '全选',
					checked: false
				},
				domHeight: '9rem',
				selectedList: [], //选中的
				countData: 0,
				tabs,
				TabCur: 0,
				scrollLeft: 0,
				NavBarColor: this.NavBarColor,
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无数据 ~', // 提示

					},
					loading: '',
					text: '全部',
					isShowNoMore: false,
					textNoMore: '我是有底线的 >_<'
				},
				myFormData: {
					idArray: "",
					DealDetail: "",
					DealStatus: "1",
					Dealer: "",
				},
				// 下拉刷新的常用配置
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				checkbox: [],
				msgList: [], //列表数据
				read: "all",
				announcement1: [],
				msg1Count: "",
				msg1Title: "",
				announcement2: [],
				msg2Count: "",
				msg2Title: "",
				url: "/three/flowmeterWarnInfo",
				urla: "/three/flowmeterWarnInfoCount",
				listTouchStart: 0,
				modalName: null,
				listTouchDirection: null,
				deviceId: '',
				modalName2: null,
				selectionSort: 'RevDate desc',

			}
		},
		onLoad: function(option) {
			this.getConut()
			console.log('((()))')
		},
		onShow() {
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
		computed: {
			top() {
				return this.CustomBar * 2 + 300
			},
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
		},

		methods: {

			//=============================================报警类型检索
			reset4() {
				this.louceng = ''
				this.checkbox = [] //复选框

				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},

			selectitem4(index, item) {

				this.checkbox = [] //复选框
				this.selectedList = [];

				if (index >= 0) {
					this.louceng = this.louceng_data[index].typeid;
				} else {
					this.louceng = ""
				}
				this.mescroll.resetUpScroll()
				this.getConut()

			},

			//=============================================第一个弹窗

			radioChange1: function(evt) {
				this.myFormData.DealStatus = evt.detail.value
			},

			textareaAInput(e) {
				this.myFormData.DealDetail = e.detail.value
			},
			// 弹出
			showModal(e) {

				if (this.selectedList.length == 0) {
					this.$tip.error('请选择报警信息！');
					return false
				}

				this.modalName = e.currentTarget.dataset.target
			},
			//取消
			hideModal(e) {
				this.modalName = null
				this.myFormData.DealDetail = ""
			},

			//=============================================第二个弹窗
			radioChange2: function(evt) {
				this.selectionSort = evt.detail.value
				this.modalName2 = null
				this.checkbox = []
				this.selectedList = [];
				this.mescroll.resetUpScroll()

			},

			// 弹出
			showModa2(e) {
				this.modalName2 = e.currentTarget.dataset.target
			},
			//取消
			hideModa2(e) {
				this.modalName2 = null
			},


			//=============================================列表选择

			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}

				this.selectedList = [];
				//往已选数组里塞数据
				for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
					this.selectedList.push(values[j]);
				}

				console.log('%%%%%%%%%%%%', this.selectedList)

			},

			//=============================================全选

			CheckboxChange2(e) {
				if (this.checkeda.checked === true) {

					this.checkeda.checked = false;

					this.selectedList = [];

					//把列表复选框的为true
					var items = this.checkbox;
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						items[i].checked = false;
					}

				} else if (this.checkeda.checked === false) {

					this.checkeda.checked = true;

					var items = this.checkbox;
					console.log('^^^^^^^^^^^^^^^^', items)
					this.selectedList = [];

					for (var i = 0, lenI = items.length; i < lenI; ++i) {

						//把列表复选框的为true
						items[i].checked = true;
						//把复选框里的数据 全塞到里边
						this.selectedList.push(items[i].value);
					}

				}

			},

			//=============================================总数

			getConut() {
				let keyword = this.TabCur
				let warnType = this.louceng

				//联网加载数据
				this.$http.get(this.urla, {
					params: {
						deviceId: this.deviceId,
						keyword: keyword,
						warnType: warnType
					},
				}).then(res => {
					if (res.data.success) {
						this.countData = res.data.result
					}

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

			upCallback(page) {
				console.log("tabindex", this.TabCur)
				let keyword = this.TabCur
				let warnType = this.louceng
				//联网加载数据
				this.$http.get(this.url, {
					params: {
						pageNo: page.num,
						pageSize: page.size,
						deviceId: this.deviceId,
						keyword: keyword,
						warnType: warnType,
						selectionSort: this.selectionSort
					},

				}).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;

					this.announcement1 = res.data.result.records
					this.mescroll.endSuccess(this.announcement1.length);
					//设置列表数据
					if (res.data.success) {
						console.log("res", res.data)
						this.msg1Count = res.data.result.total
						this.msg1Title = "通知公告";
						for (let annItem of this.announcement1) {
							this.msgList.push(annItem)
						}
						if (page.num == 1) {
							this.checkbox = []
							for (let annItem of this.announcement1) {
							
								let aa = annItem.id
								let myObject = {
									value: aa,
									checked: false
								};
								this.checkbox.push(myObject)
							}
						} else {
							for (let annItem of this.announcement1) {
							
								let aa = annItem.id
								let myObject = {
									value: aa,
									checked: false
								};
								this.checkbox.push(myObject)
							}
						}
					}
					if (page.num == 1) {
						this.msgList = []; //如果是第一页需手动制空列表
						this.msgList = this.msgList.concat(this.announcement1); //追加新数据
					}

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

			//=============================================批量处理

			bulkSubmission() {

				this.myFormData.idArray = this.selectedList;

				console.log('^^^^^^^^^^^^^^^@@@@', this.myFormData)


				this.$tip.loading();
				this.$http.put('/three/alarmProcessingBatch', this.myFormData).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {
						this.$tip.toast('批量处理成功')
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 上一页
						uni.navigateBack({
							success: function() {
								beforePage.onLoad(); // 执行上一页的onLoad方法
							}
						});
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('批量处理失败')
				})

			},


			goAnnotationDetail(item) {
				uni.navigateTo({
					url: '/pages/cremote/flowmeterWarnDetail?item=' + encodeURIComponent(JSON.stringify(item))
				});

			},

			flowmeterWarnDispose(item) {
				uni.navigateTo({
					url: '/pages/cremote/flowmeterWarnDispose?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},

			//=============================================已处理未处理切换

			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if (this.TabCur == '0') {
					this.domHeight = '9rem'
				} else if (this.TabCur == '1') {
					this.domHeight = '9rem'
				}

				this.msgList = [] // 先置空数据列表,显示加载进度
				this.checkbox = [] //复选框
				this.checkeda.checked = false
				this.getConut() //加载总数


				this.mescroll.resetUpScroll() // 再刷新列表数据
			},

			//=============================================搜索 重置

			goStatistics() {
				this.checkbox = []
				this.selectedList = [];

				if (this.mescroll) {
					this.mescroll.resetUpScroll()
					this.getConut()
				}
			},
			reset() {
				this.deviceId = ""
				this.checkbox = []
				this.selectedList = [];
				this.mescroll.resetUpScroll()
				this.getConut()
			},



			// =================================滚动===================================


			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},

		}
	}
</script>

<style scoped>
	.e-btn {
		margin-bottom: 1rem;
	}

	.titlePad {
		margin-top: 0.6rem;
	}

	.cu-list>.move-cur {
		transform: translateX(-150rpx);

	}

	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}
</style>